<template>
  <back-btn></back-btn>
  <div id="app">
    <emitsChild :modalShow="emitsModalShow" @close-modal="closeModalHandle" />

    <button @click="openModalHandle">打开模态框</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import emitsChild from "../components/emitsChild.vue";

export default defineComponent({
  components: {
    emitsChild,
  },
  setup() {
    // 模态框显隐初值
    const emitsModalShow = ref(false);
    // 打开模态框事件
    function openModalHandle() {
      emitsModalShow.value = true;
    }
    // 关闭模态框事件
    function closeModalHandle() {
      emitsModalShow.value = false;
    }

    return { emitsModalShow, openModalHandle, closeModalHandle };
  },
});
</script>

<style scoped></style>
